<style>
    body {
        font-size: 14px;
        height: 100%;
        width: 100%;
        overflow: hidden;
    }

    ul, li {
        list-style: none;
    }


    #container {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        padding: 0;

    }

    ::-webkit-scrollbar { /*滚动条整体样式*/

        width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
        height: 1px;

    }

    ::-webkit-scrollbar-thumb { /*滚动条里面小方块*/

        border-radius: 10px;

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        background: #535353;

    }

    ::-webkit-scrollbar-track { /*滚动条里面轨道*/

        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);

        border-radius: 10px;

        background: #EDEDED;

    }

    #content #desc, #content #dict {
        position: absolute;
        top: 80px;
        bottom: 20px;;
        left: 20px;;
        right: 20px;;
    }

    #editor-content {
        max-height: 1000px;
        min-height: 500px;
        width: 100%;
        box-sizing: border-box;
    }

    #container .top {
        padding-top: 10px;
        background: white;
        box-sizing: border-box;
    }

    .play {
        height: 700px;
        min-width: 500px;
        max-width: 1280px;
        background: black;
        margin: 0 auto;
    }

    .play .video {
        height: 600px;
        width: 80%;
        float: left;
        background: url("../../../res/images/index-header.jpg");
        background-size: 100px 200px;
        position: relative;
    }

    .play .dir {
        height: 600px;
        width: 20%;
        float: left;
    }

    .play .tag {
        background: #2E2D3C;
        box-sizing: border-box;
        padding: 10px;
        clear: left;
        height: 100px;
        width: 100%;
    }

    .play .video .btn {
        width: 80px;
        height: 80px;
        background: #00a2d4;
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        cursor: pointer;
        transform: translate(-50%, -50%)
    }

    .play .tag .big-title {
        font-size: 25px;
        color: white;
    }

    .play .tag .small-title {
        margin-top: 10px;
        font-size: 16px;
        color: #cecece;
    }

    .dir {
        font-size: 14px;
        overflow-y: auto;
    }

    .list li.item {
        color: #cecece;
        box-sizing: border-box;
        margin: 10px 10px;
        min-height: 50px;
        border-bottom: 1px solid #3F3F3F;
    }

    .status-gray {
        background: grey;
        font-size: 12px;
        color: black;
        padding: 0 5px;
    }

    .status-select {
        background: #00a2d4;
        font-size: 12px;
        padding: 0 5px;
        color: black;
    }

    .list p.title {
        line-height: 20px;
        font-size: 16px;
    }

    .list p.link {
        padding: 15px 0;

    }

    .list a {
        color: #cecece;
        padding-left: 5px;
    }

    .list a:hover {
        color: #00a2d4;
        cursor: pointer;
    }

    .list a .time {
        color: grey;
        font-size: 12px;
        margin-left: 35px;
    }

    .video .icon {
        width: 0;
        height: 0;
        border: 15px solid;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-15%, -50%);
        border-color: transparent transparent transparent white;
    }

    #container .bottom {
        position: absolute;
        top: 700px;
        bottom: 0;
        left: 0;
        right: 0;
    }

    #container .bottom .content {

        min-width: 500px;
        max-width: 1280px;
        min-height: 500px;
        background: white;
        margin: 20px auto;
    }

    .tab a {
        line-height: 50px;
        width: 150px;
        display: inline-block;
        text-align: center;

    }

    a {
        color: black;
    }

    .tab a:hover {
        color: #00a2d4;
    }

    .tab-selected {
        border-bottom: 3px solid #00a2d4;
        color: #00a2d4;
    }

    #container #desc, #container #dict {
        box-sizing: border-box;
        padding: 20px;
    }

    #btn-edit {
        position: absolute;
        right: 20px;
        top: 20%;
    }

    #editlist .title, #list .title {
        line-height: 40px;
        font-weight: bold;
        font-size: 16px;
        padding-left: 10px;
    }

    #editlist .item, #list .item {
        line-height: 40px;
        font-size: 14px;
        padding-left: 30px;
    }

    #editlist .handler {
        margin-left: 30px;
        display: none;
    }

    #editlist .res, #list .res {
        line-height: 40px;
        height: 40px;
        width: 300px;
        margin-bottom: 10px;
        margin-left: 50px;
        padding-left: 10px;
        background: #E3E3E3;
    }

    #editlist .res:hover, #list .res:hover {
        background: #cecece;
        cursor: pointer;
    }

    #add-dialog {
        display: none;
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background: white;
        border: 1px solid #cecece;
        margin: auto;
        width: 400px;
        height: 470px;
        box-sizing: border-box;
    }

    .btns {
        position: absolute;
        bottom: 20px;
        right: 20px;
    }

    #add-dialog .title {
        line-height: 40px;
        padding-right: 20px;
        background: #f3f3f3;
    }

    #add-dialog #add_form {
        padding-top: 20px;
        padding-right: 20px;
    }

    #player{
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
    }
</style>
<div id="container" class="fsh-rightPanel">
    <div class="top">
        <div class="play">
            <div class="video">
                <img id="cover" style="width: 100%;height: 100%">
                <div class="btn">
                    <div class="icon"></div>
                </div>
                <video id="player" class="video-js vjs-default-skin" controls preload="none"
                       poster="http://vjs.zencdn.net/v/oceans.png">
                    <source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
                     
                </video>
            </div>
            <div class="dir">
                <ul class="list" id="play-list">
                    <!--                                        <li class="item">-->
                    <!--                                            <p class="title">平面设计系列课程</p>-->
                    <!--                                            <p class="link"><span class="status-select">录播</span><a>平面设计操作技巧<br><span-->
                    <!--                                                    class="time">37分钟</span></a></p>-->
                    <!--                                            <p class="link"><span class="status-gray">录播</span><a>平面设计操作技巧<br><span class="time">37分钟</span></a>-->
                    <!--                                            </p>-->
                    <!--                                        </li>-->
                </ul>
            </div>
            <div class="tag">
                <p class="big-title" id="big-title">平面设计系列课程</p>
                <p class="small-title"><span>最近在学1000人</span></p>
            </div>
        </div>
    </div>
    <div id="dir" class="bottom">
        <div class="content">
            <div class="tab" style="position: relative;border-bottom: 1px solid #E3E3E3">
                <a class="tab-selected" id="tab1">课程概述</a>
                <a id="tab2">目录</a>

<!--                <button class="layui-btn layui-btn-normal" id="btn-edit" style="display: none">编辑</button>-->
            </div>
            <div id="desc">
                <!--                <img src="./res/images/detail.jpg" style="width: 100%;height: auto">-->
            </div>
            <div id="dict" style="display: none">
                <ul id="list"></ul>
            </div>
            <div id="edit-desc" style="display: none">
                <script id="editor-content" type="text/plain"></script>
            </div>
            <div id="edit-dict" style="display: none">
<!--                <button id="btn-add-dir" class="layui-btn layui-btn-normal" style="margin: 20px">+新建目录</button>-->
                <ul id="editlist">
                    <!--                    <li>-->
                    <!--                        <p class="title">平面设计教程</p>-->
                    <!--                        <p class="item">平面设计教程</p>-->
                    <!--                        <p class="item">平面设计教程</p>-->
                    <!--                    </li>-->
                </ul>
            </div>
        </div>
    </div>
</div>
<!--添加对话框-->
<div class="custom-dialog" id="add-dialog">
    <input type="password" style="display: none">
    <div class="title">&nbsp;&nbsp;新建目录</div>
    <input type="hidden" id="parentId">
    <div id="add_form" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">目录名称</label>
            <div class="layui-input-block">
                <input type="text" id="title" lay-verify="required" placeholder="请输入内容" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">状态</label>
            <div class="layui-input-block">
                <select id="status" lay-filter="status" name="course_state" value="1">
                    <option value="1">直播</option>
                    <option value="2">录播</option>
                    <option value="3">其他资源</option>
                </select>
            </div>
        </div>
        <!--视频相关-->
        <!--        <div class="layui-form-item" id="layout-rtmp">-->
        <!--            <label class="layui-form-label">推流地址</label>-->
        <!--            <div class="layui-input-block">-->
        <!--                <input type="text" id="rtmp" lay-verify="required" placeholder="请输入推流rtmp地址" class="layui-input">-->
        <!--            </div>-->
        <!--        </div>-->

        <div class="layui-form-item" id="layout-upload" style="display: none">
            <label class="layui-form-label">上传附件</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm" id="upload-file">多选</button>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">章节难度</label>
            <div class="layui-input-block">
                <select id="easy" lay-filter="easy" name="ease">
                    <option value="0">初级</option>
                    <option value="1">中级</option>
                    <option value="2">高级</option>
                </select>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">开始时间</label>
            <div class="layui-input-block">
                <input type="text" name="startTime" id="startDate" lay-verify="datetime" placeholder="请选择课程开始时间"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">结束时间</label>
            <div class="layui-input-block">
                <input type="text" name="endTime" id="endingDate" lay-verify="datetime" placeholder="请选择课程结束时间"
                       autocomplete="off" class="layui-input">
            </div>
        </div>
    </div>

    <div class="btns">
        <button class="layui-btn layui-btn-normal" id="btn-add">添加</button>
        <button class="layui-btn layui-btn-warm" id="btn-cancel">取消</button>
    </div>
</div>

<script>
    var parentId;
    var parentInfo;
    var isEditShow = false;
    var resUrls = [];
    var ue = UE.getEditor('editor-content');
    var isEdit = false; //是否编辑课程目录
    var editCourse; // 编辑课程目录数据
    layui.use(['layer', 'upload', 'form', 'laydate'], function () {
        var layer = layui.layer;
        var upload = layui.upload;
        var form = layui.form;
        var layData = layui.laydate;
        form.render();

        //监听课程状态选择
        var layoutRtmp = $('#layout-rtmp');
        var layoutUpload = $('#layout-upload');
        form.on('select(status)', function (data) {
            if (data.value == 1) {
                layoutRtmp.show();
                layoutUpload.hide();
            } else {
                layoutRtmp.hide();
                layoutUpload.show();
            }
        });
        //开始日期
        layData.render({
            elem: '#startDate'
            , type: 'datetime'
        });
        //结束日期
        layData.render({
            elem: '#endingDate'
            , type: 'datetime'
        });
        upload.render({
            elem: '#upload-file'
            , url: context + '/api/fileupload/add'
            , field: 'attach'
            , accept: 'file'
            , multiple: true
            , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
                resUrls = [];
            }
            , allDone: function (obj) { //当文件全部被提交后，才触发
                // console.log(obj.successful); //请求成功的文件数
                layer.closeAll('loading'); //关闭loading
                console.log(resUrls);
            }
            , done: function (res, index, upload) { //每个文件提交一次触发一次。详见“请求成功的回调”
                resUrls.push(res.link)
            }, error: function (index, upload) {
                layer.closeAll('loading'); //关闭loading
            }
        });


        //监听浏览器宽度的改变
        window.onresize = function () {
            ue.setHeight($('#editor-content').height());
        };
        parentId = getHashParam().id;
        loadCourseData();
        loadDirData();
    });
    // tab点击事件
    var descDiv = $('#desc');
    var dictDiv = $('#dict');
    var descEditDiv = $('#edit-desc');
    var dictEditDiv = $('#edit-dict');
    $(".tab").find('a').click(function () {
        checkedTab($(this).prop('id'));
    });

    function checkedTab(tab) {
        $(".tab").find('a').removeClass('tab-selected');
        $(".tab #" + tab).addClass('tab-selected');
        switch (tab) {
            case 'tab1':
                if (isEditShow) {
                    descEditDiv.show();
                    dictEditDiv.hide();
                } else {
                    descDiv.show();
                    dictDiv.hide();
                }
                break;
            case 'tab2':
                if (isEditShow) {
                    descEditDiv.hide();
                    dictEditDiv.show();
                } else {
                    descDiv.hide();
                    dictDiv.show();
                }
                break;
        }
    }

    // 是否编辑
    $('#btn-edit').click(function () {
        var btn = $(this);
        if (btn.html() === '编辑') {
            descEditDiv.show();
            dictEditDiv.hide();
            descDiv.hide();
            dictDiv.hide();
            btn.html('保存');
            isEditShow = true;
            checkedTab('tab1');
        } else {
            descDiv.show();
            dictDiv.hide();
            descEditDiv.hide();
            dictEditDiv.hide();
            btn.html('编辑');
            isEditShow = false;
            updateDetailDesc();
            checkedTab('tab1');
        }
    });

    $('#btn-add').click(function () {
        var title = $('#title');
        var status = $('#status');
        var startTime = $('#startDate');
        var endTime = $('#endingDate');
        var easy = $('#easy');
        if (window.util.isEmpty(title.val())) {
            title.focus();
            layer.msg("标题不能为空")
            return;
        }
        if (window.util.isEmpty(startTime.val())) {
            startTime.focus();
            layer.msg("选择开始时间");
            return;
        }
        if (window.util.isEmpty(endTime.val())) {
            endTime.focus();
            layer.msg("选择结束时间");
            return;
        }
        var data = {
            resource_url: resUrls.toString(),
            course_task: title.val(),
            course_state: status.val(),
            startTime: startTime.val(),
            endTime: endTime.val(),
            ease: easy.val(),
            parent_id: parentId,
            major_id: parentInfo.major_id,
            course_subject: parentInfo.course_subject,
            course_teacher_id: parentInfo.course_teacher_id,
        };
        if (isEdit) {
            data.course_id = editCourse.course_id;
            data.hash = editCourse.hash;
        }
        createOrEditItem(data);
    });
    // 取消
    $('#btn-cancel').click(function () {
        $('#add-dialog').hide();
    });
    // 新建目录
    $('#btn-add-dir').click(function () {
        showDialog();
    });

    // 显示添加课程目录对话框
    function showDialog() {
        $('#add-dialog').show();
    }

    //加载课程信息
    function loadCourseData() {
        $.ajax({
            url: context + '/api/educourse/getOne?course_id=' + parentId,
            type: 'GET',
            success: function (result) {
                if (result.success) {
                    parentInfo = result.data;
                    $('#big-title').html(parentInfo.course_task);
                    $('#cover').attr('src', parentInfo.resource_url);
                    var content = parentInfo.course_introduction !== undefined ? parentInfo.course_introduction : '';
                    $('#desc').html(content);
                    ue.ready(function () {
                        //设置默认值
                        ue.setContent(content);
                    });
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("获取失败");
            }
        });
    }

    //加载目录
    function loadDirData() {
        $.ajax({
            url: context + '/api/educourse/getTask?course_id=' + parentId,
            type: 'GET',
            success: function (result) {
                if (result.success) {
                    var data = result.data;
                    createPlayListItem(data);
                    createDetailListItem(data);
                    createEditDetailListItem(data);
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("获取失败");
            }
        });
    }

    //播放器目录
    function createPlayListItem(data) {
        var list = $('#play-list');
        list.empty();
        for (var i = 0; i < data.length; i++) {
            var li = '<li class="item"> <p class="title">' + data[i].course_task + '</p>\n';
            if (data[i].course_state === 1) {
                li += '<p class="link" id="' + i + '"><span class="status-select">' + courseStatus[data[i].course_state] + '</span><a>' + data[i].course_task + ')<br><span  class="time">37分钟</span></a></p>';
            } else {
                var res = data[i].resource_url;
                if (res !== undefined && res.length > 1) {
                    var resUrls = res.split(',');
                    for (var j = 0; j < resUrls.length; j++) {
                        li += '<p class="link"><span class="status-select">' + courseStatus[data[i].course_state] + '</span><a>' + data[i].course_task + '(' + (j + 1) + ')<br><span  class="time">37分钟</span></a></p>';
                    }
                }
            }
            li += '</li>';
            list.append(li);
        }

        //点击播放
        list.find('.link').click(function () {
            var index = $(this).prop('id');
            var id = data[index].course_id;
            jump('./views/live/template/live[id=' + id + ']');
        });

    }

    //详情目录
    function createEditDetailListItem(data) {
        var list = $('#editlist');
        list.empty();
        for (var i = 0; i < data.length; i++) {
            var li = '    <li class="item" id="' + i + '"><span class="title">0' + (i + 1) + '【' + courseStatus[data[i].course_state] + '】' + data[i].course_task + ' </span><span\n' +
                '                        class="handler">\n' +
                // '                        <i class="layui-icon add" title="添加">&#xe654;</i>\n' +
                '                         <i class="layui-icon edit" title="编辑">&#xe642;</i>\n' +
                '                         <i class="layui-icon del" title="删除">&#xe640;</i>\n' +
                '                    </span>\n';

            var res = data[i].resource_url;
            if (res !== undefined && res.length > 1) {
                var resUrls = res.split(',');
                for (var j = 0; j < resUrls.length; j++) {
                    li += ' <p class="res"><i class="iconfont icon-bofang"></i>' + data[i].course_task + '(' + (j + 1) + ')</p>';
                }
            }
            li += '</li>';
            list.append(li);
        }

        // 显示隐藏操作
        list.find('li').mouseenter(function () {
            $(this).find('span.handler').show();
        });
        list.find('li').mouseleave(function () {
            $(this).find('span.handler').hide();
        });
        // 添加
        list.find('.desc.html').click(function () {
            isEdit = false;
            showDialog();
        });
        // 编辑
        list.find('.edit').click(function () {
            isEdit = true;
            editCourse = data[$(this).parents('li').prop('id')];
            $('#title').val(editCourse.course_task);
            $('#status').val(editCourse.course_state);
            $('#startDate').val(editCourse.startTime);
            $('#endingDate').val(editCourse.endTime);
            $('#easy').val(editCourse.ease);
            showDialog();
        });
        // 删除
        list.find('.del').click(function () {
            var index = $(this).parents('li').prop('id');
            layer.confirm('确认删除此目录？', {
                icon: 7,
                title: "提示",
                btn: ['确认', '取消'] //按钮
            }, function () {
                $.ajax({
                    url: context + '/api/educourse/' + data[index].course_id,
                    type: "DELETE",
                    success: function (result) {
                        if (result.success && result.data > 0) {
                            layer.msg("删除成功");
                            loadDirData();
                        } else {
                            layer.msg(result.msg);
                        }
                    },
                    error: function () {
                        layer.msg("删除异常");
                    }
                })
            }, function () {
                layer.closeAll();
            });
        });
    }

    //详情目录
    function createDetailListItem(data) {
        var list = $('#list');
        list.empty();
        for (var i = 0; i < data.length; i++) {
            var li = '<li class="item"><span class="title">0' + (i + 1) + '【' + courseStatus[data[i].course_state] + '】' + data[i].course_task + ' </span>';
            var res = data[i].resource_url;
            if (res !== undefined && res.length > 1) {
                var resUrls = res.split(',');
                for (var j = 0; j < resUrls.length; j++) {
                    li += ' <p class="res"><i class="iconfont icon-bofang"></i>' + data[i].course_task + '(' + (j + 1) + ')</p>';
                }
            }
            li += '</li>';
            list.append(li);
        }
    }


    //新建目录
    function createOrEditItem(data) {
        var title = $('#title');
        var status = $('#status');
        var startTime = $('#startDate');
        var endTime = $('#endingDate');
        var easy = $('#easy');
        if (window.util.isEmpty(title.val())) {
            title.focus();
            layer.msg("标题不能为空")
            return;
        }
        if (window.util.isEmpty(startTime.val())) {
            startTime.focus();
            layer.msg("选择开始时间");
            return;
        }
        if (window.util.isEmpty(endTime.val())) {
            endTime.focus();
            layer.msg("选择结束时间");
            return;
        }

        if (isEdit) {
            $.ajax({
                url: context + '/api/educourse/updateOne',
                type: 'PATCH',
                dataType: 'json',
                contentType: "application/json;charset-UTF-8",
                data: JSON.stringify(data),
                success: function (result) {
                    if (result.success) {
                        $('#add-dialog').hide();
                        loadDirData();
                    } else {
                        layer.msg(result.msg);
                    }
                },
                error: function () {
                    layer.msg("添加失败");
                }
            });
        } else {
            $.ajax({
                url: context + '/api/educourse/insertOne',
                type: 'POST',
                dataType: 'json',
                contentType: "application/json;charset-UTF-8",
                data: JSON.stringify(data),
                success: function (result) {
                    if (result.success) {
                        $('#add-dialog').hide();
                        loadDirData();
                    } else {
                        layer.msg(result.msg);
                    }
                },
                error: function () {
                    layer.msg("添加失败");
                }
            });
        }
    }

    //编辑课程描述
    function updateDetailDesc() {
        var content = ue.getContent();
        if (content.length === 0) {
            layer.msg('请填写课程介绍');
            return;
        }
        var data = {
            course_id: parentInfo.course_id,
            hash: parentInfo.hash,
            course_introduction: content
        };
        $.ajax({
            url: context + '/api/educourse/updateOne',
            type: 'PATCH',
            dataType: 'json',
            contentType: "application/json;charset-UTF-8",
            data: JSON.stringify(data),
            success: function (result) {
                if (result.success) {
                    loadCourseData();
                } else {
                    layer.msg(result.msg);
                }
            },
            error: function () {
                layer.msg("添加失败");
            }
        });
    }

</script>
